import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Tabs, TabsContent } from '@/components/ui/tabs'
import { Header } from '@/components/layout/header'
import { Main } from '@/components/layout/main'
import { TopNav } from '@/components/layout/top-nav'
import { ProfileDropdown } from '@/components/profile-dropdown'
import { Search } from '@/components/search'
import { ThemeSwitch } from '@/components/theme-switch'
import { Overview } from './components/overview'
import { SystemInfo } from './components/system-info'
import { PersonIcon } from '@radix-ui/react-icons'
import { getRouteApi } from '@tanstack/react-router'

export default function Dashboard() {
  const routeApi = getRouteApi('/_authenticated/')
  const data = routeApi.useLoaderData()
  return (
    <>
      {/* ===== Top Heading ===== */}
      <Header>
        <TopNav links={topNav} />
        <div className='ml-auto flex items-center space-x-4'>
          <Search />
          <ThemeSwitch />
          <ProfileDropdown />
        </div>
      </Header>

      {/* ===== Main ===== */}
      <Main>
        <div className='mb-2 flex items-center justify-between space-y-2'>
          <h1 className='text-2xl font-bold tracking-tight'>Dashboard</h1>
        </div>
        <Tabs
          orientation='vertical'
          defaultValue='overview'
          className='space-y-4'
        >
          <TabsContent value='overview' className='space-y-4 pt-2'>
            <div className='grid gap-4 sm:grid-cols-2 lg:grid-cols-4'>
              <Card>
                <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
                  <CardTitle className='text-sm font-medium'>
                    今日注册
                  </CardTitle>
                  <PersonIcon className='text-muted-foreground h-4 w-4' />
                </CardHeader>
                <CardContent>
                  <div className='text-2xl font-bold'>+{data?.today_user_count}</div>

                </CardContent>
              </Card>
              <Card>
                <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
                  <CardTitle className='text-sm font-medium'>
                    7日内注册
                  </CardTitle>
                  <PersonIcon className='text-muted-foreground h-4 w-4' />

                </CardHeader>
                <CardContent>
                  <div className='text-2xl font-bold'>+{data?.day7_user_count}</div>

                </CardContent>
              </Card>
              <Card>
                <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
                  <CardTitle className='text-sm font-medium'>30日内注册</CardTitle>
                  <PersonIcon className='text-muted-foreground h-4 w-4' />

                </CardHeader>
                <CardContent>
                  <div className='text-2xl font-bold'>+{data?.day30_user_count}</div>

                </CardContent>
              </Card>
              <Card>
                <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
                  <CardTitle className='text-sm font-medium'>
                    总注册
                  </CardTitle>
                  <PersonIcon className='text-muted-foreground h-4 w-4' />

                </CardHeader>
                <CardContent>
                  <div className='text-2xl font-bold'>+{data?.user_count}</div>
                </CardContent>
              </Card>
            </div>
            <div className='grid grid-cols-1 gap-4 lg:grid-cols-12'>
              <Card className='col-span-1 lg:col-span-8'>

                <CardContent className='pl-2'>
                  <Overview data={data?.day7_detail} />
                </CardContent>
              </Card>
              <Card className='col-span-1 lg:col-span-4'>
                <CardHeader>
                  <CardTitle>系统信息</CardTitle>
                </CardHeader>
                <CardContent>
                  <SystemInfo data={data ? data : []} />
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </Main>
    </>
  )
}

const topNav = [
  {
    title: 'Overview',
    href: 'dashboard/overview',
    isActive: true,
    disabled: false,
  },
  {
    title: 'Customers',
    href: 'dashboard/customers',
    isActive: false,
    disabled: true,
  },
  {
    title: 'Products',
    href: 'dashboard/products',
    isActive: false,
    disabled: true,
  },
  {
    title: 'Settings',
    href: 'dashboard/settings',
    isActive: false,
    disabled: true,
  },
]
